<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Assignment3</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

</head>

<body>

	<div style="width:41em; height:8em; position:absolute; left:2em">
	
		<h1 style="font-weight:bold">jQuery Form Test</h1>

		<h2 style="font-weight:bold">Assignment 3</h2>	
	
		<p> 
		Lorem ipsum dolor sit amet, consectetur adipisicing elit,
		sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
		enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
		ut aliquip ex ea commodo consequat. Duis aute irure dolor in
		reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
		pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
		culpa qui officia deserunt mollit anim id est laborum. 
		</p>

	<form role="form">
  		<div class="form-group" id="email">    		
    		<label for="exampleInputEmail1">Email address</label>    		
    		<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  		</div>
  
  		<div class="form-group" id="password">
    		<label for="exampleInputPassword1">Password</label>
    		<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  			<p class="help-block">You should not tell others your password.</p>
  		</div>
  
  		<div class="checkbox">
    		<label>
    			<input type="checkbox"  id="checkbox1"> <p style="font-weight:bold">I agree all terms and conditions.</p>
    		</label>
  		</div>

  		<button type="submit" class="btn btn-success" id="submit">Submit</button>
	</form>

	</div>

<script>

$("#submit").click(function(){
	
	if(!$("#exampleInputEmail1").val().match("@")){
		$("#exampleInputEmail1").after("<p style='color:Brown; font-weight:bold'>Email is invalid.</p>");
		$("#email").attr("class","form-group has-error");
		alert("Email is invalid.");
	}
	else if($("#exampleInputPassword1").val().length<8){
		$(".help-block").html("<p style='color:Brown; font-weight:bold'>Password is too short.</p>");
		$("#password").attr("class","form-group has-error");
		alert("Password is too short.");
	}
	else if(!$("#checkbox1").prop('checked')){
		$("#checkbox1").next().after("<p style='color:Brown; font-weight:bold; margin:-0.5em -1.2em 0em'>You need to agree to continue.</p>");
		alert("You need to agree to continue.");
	}
	else{
		  $('h2').after("<p class='bg-info'>OK! Thanks for your registration!</p>")
		  alert("OK! Thanks for your registration!");
		}
});

</script>

</body>
</html>